<!-- 商品列表显示组件 -->
<template>
	<view class="goods-item" :class="type">
		<view class="img" :style="{ width: imgWidth, height: imgHeight }"><image :src="img"></image></view>
		<view class="content">
			<view class="row">
				<view class="name" :style="{ 'font-size': nameSize + 'rpx', height: nameSize * nameRowNum * 1.3 + 'rpx', '-webkit-line-clamp': nameRowNum }">{{ name }}</view>
			</view>
			<view class="row">
				<view v-if="content != '未定义'" class="content">{{ content }}</view>
			</view>
			<view class="row">
				<view class="price">
					<text>{{ moneySymbol }}{{ price }}</text>
					<text class="org" v-if="orgprice && orgprice != '未定义'">{{ moneySymbol }}{{ orgprice }}</text>
				</view>
				<view v-if="goodNum != '未定义' && !isEditNum" class="number">数量:{{ goodNum }}</view>
				<uni-number-box v-if="isEditNum" class="number-box" :value="editGoodNum" :min="min" :max="max" @change="goodNumChange"></uni-number-box>
			</view>
		</view>
	</view>
</template>

<script>
import uniNumberBox from '../uni-number-box/uni-number-box.vue';
export default {
	components: {
		uniNumberBox
	},
	props: {
		type: {
			//显示类型
			type: String,
			default: 'column' //cross:横向 column:纵向
		},
		img: {
			//商品图像
			type: String, //图像地址
			default: '../../static/load_error.jpeg'
		},
		imgWidth: {
			type: String, //图像宽度
			default: '100%'
		},
		imgHeight: {
			type: String, //图像高度
			default: '150px'
		},
		moneySymbol: {
			//钱符号
			type: String,
			default: '¥' //默认是人民币
		},
		price: {
			//价格
			type: Number | String, //价格数值
			default: '未定义'
		},
		orgprice: {
			//原价格
			type: Number | String, //价格数值
			default: '未定义'
		},
		name: {
			//商品名称
			type: String,
			default: '未定义'
		},
		nameSize: {
			//名字大小
			type: Number,
			default: 38
		},
		nameRowNum: {
			// 名字行数
			type: Number,
			default: 1
		},
		content: {
			//内容描述
			type: String,
			default: '未定义'
		},
		goodNum: {
			type: Number | String, //商品数量 未定义则不显示
			default: '未定义'
		},
		numMax: {
			type: Number, //商品数量 最大值
			default: 100
		},
		numMin: {
			type: Number, //商品数量 最大值
			default: 0
		},
		isEditNum: {
			//是否编辑商品数量
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			max: this.numMax,
			min: this.numMin,
			editGoodNum: this.goodNum !== '未定义' ? this.goodNum : 0 //编辑的商品数量
		};
	},
	watch: {
		goodNum(newValue, oldValue) {
			console.log('newValue', newValue, 'oldValue', oldValue);
			if (newValue !== '未定义' && newValue !== oldValue && newValue !== this.editGoodNum) this.editGoodNum = newValue;
		}
	},
	methods: {
		goodNumChange(val) {
			//商品值发生改变
			this.editGoodNum = parseInt(val);
			this.$emit('update:good-num', parseInt(val));
			this.$emit('change', parseInt(val));
			// console.log("商品数量",val)
		}
	}
};
</script>

<style lang="scss" scoped>
.goods-item {
	// width: 100%;
	background-color: #fff;
	// margin-bottom: 14rpx;

	.img {
		display: flex;
		justify-content: center;
		align-items: center;
		// width: 100%;
		// height: 400rpx;
		overflow: hidden;
		// border-radius: 8px;

		// background: #333333;
		image {
			width: 100%;
			height: inherit;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		// width: 100%;

		.row {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			// padding: 0 20rpx;
			width: 100%;
			box-sizing: border-box;
		}

		.row:nth-last-child(1) {
			margin-bottom: 10rpx;
		}

		.price {
			width: 100%;
			font-size: 25rpx;
			color: #ff6106;
			// padding: 0 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			text.org {
				margin: 0rpx 0rpx 0rpx 20rpx;
				color: #e1dfe1;
				font-size: 25rpx;
				text-decoration: line-through;
			}
		}

		.name {
			width: 100%;
			font-size: 28rpx;
			font-weight: bolder;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			height: 80rpx;
			line-height: 1.3;
			text-overflow: ellipsis;
			display: -webkit-box;
			// -webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			// padding: 0 20rpx;
		}

		.number {
			font-size: 30rpx;
			color: #46494d;
			width: 100%;
			text-align: right;
			align-self: flex-end;
		}
	}
}

.goods-item.column {
	// 纵向
	min-width: 160rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;

	.img {
		width: 100%;
		height: 400rpx;
		border-radius: 8px;
	}

	.content {
		width: 100%;
	}
}

.goods-item.cross {
	// 横向
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;

	.name {
		font-size: 40rpx;
		font-weight: bolder;
	}

	.img {
		width: 200rpx;
		height: 200rpx;
		margin-right: 20rpx;
	}

	.content {
		width: 73%;

		.price {
			font-size: 28rpx;
			flex-direction: column;
			align-items: flex-start;

			text.org {
				margin: 0;
				font-size: 26rpx;
			}
		}
	}
}

// .goods-item:hover {
// 	background-color: #a9f5d0;
// }
</style>
